<style scoped lang="scss">
#dashboard-block {
  .el-col-8.block {
    width: 33.6%;
  }
  .el-col-16.block {
    width: 66.4%;
  }
}
.dateli {
  .el-row {
    margin-bottom: 5px;
  }
}
</style>

<style scoped>
.dash_calander {
  /* color: rgb(255, 255, 255); */
}
.text_yellow {
  color: rgb(253, 156, 27);
}
.bg_border {
  border-radius: 20px;
}

.bg_yellow {
  background-color: rgb(253, 156, 27);
}
.cala_title .el-col div {
  border-radius: 20px;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 10px;
}
.text_blue {
  color: rgb(20, 163, 197);
}
.bg_blue {
  background-color: rgb(20, 163, 197);
}
.el-col {
  text-align: center;
}

.cursor {
  cursor: pointer;
}
.cala_date {
  font-size: 14px;
}
.datamarked_blue {
  background-color: rgb(20, 163, 197);
  border-radius: 20px;
  margin: 0 auto;
  text-align: center;
  width: 70%;
  font-size: 14px;
}
.datamarked_yellow {
  background-color: rgb(253, 156, 27);
  border-radius: 20px;
  margin: 0 auto;
  text-align: center;
  width: 70%;
  color: rgb(255, 255, 255);
  font-size: 14px;
}
.cala_month {
  font-size: 18px;
  color: rgb(20, 163, 197);
  font-weight: 600;
  text-align: right;
}
.paiban {
  -webkit-transform: scale(0.7);
  height: 15px;
  color: rgb(20, 163, 197);
}
</style>

<template>
  <div class="dash_calander">
    <el-row style="margin-bottom:10px;">
      <el-col :span="21" :offset="1" class="cala_month">{{myTitle}}</el-col>
    </el-row>
    <el-row class="cala_title">
      <el-col :span="1">&nbsp;</el-col>
      <el-col :span="3">
        <div class="bg_yellow">Sun</div>
      </el-col>
      <el-col :span="3">
        <div class="bg_blue">Mon</div>
      </el-col>
      <el-col :span="3">
        <div class="bg_blue">Tue</div>
      </el-col>
      <el-col :span="3">
        <div class="bg_blue">Wed</div>
      </el-col>
      <el-col :span="3">
        <div class="bg_blue">Thu</div>
      </el-col>
      <el-col :span="3">
        <div class="bg_blue">Fri</div>
      </el-col>
      <el-col :span="3">
        <div class="bg_yellow">Sat</div>
      </el-col>
      <el-col :span="1">&nbsp;</el-col>
    </el-row>
    <el-row v-for="(v,index) in myData" :key="index" class="dateli">
      <el-col :span="1">&nbsp;</el-col>
      <el-col :span="3" class="text_yellow" @click="editCanlender(v[0])">
        <div class="paiban">
          <span v-if="v[0].plan||v[0].plan=='true'">{{myMark}}</span>
        </div>
        <div :class="v[0].checkon||v[0].checkon=='true'?'datamarked_yellow':'cala_date'">{{v[0].date}}&nbsp;</div>
      </el-col>
      <el-col :span="3" @click="editDate(v[1])">
        <div class="paiban">
          <span v-if="v[1].plan||v[1].plan=='true'">{{myMark}}</span>
        </div>
        <div :class="v[1].checkon||v[1].checkon=='true'?'datamarked_blue':'cala_date'">{{v[1].date}}&nbsp;</div>
      </el-col>
      <el-col :span="3" @click="editDate(v[2])">
        <div class="paiban">
          <span v-if="v[2].plan||v[2].plan=='true'">{{myMark}}</span>
        </div>
        <div :class="v[2].checkon||v[2].checkon=='true'?'datamarked_blue':'cala_date'">{{v[2].date}}&nbsp;</div>
      </el-col>
      <el-col :span="3" @click="editDate(v[3])">
        <div class="paiban">
          <span v-if="v[3].plan||v[3].plan=='true'">{{myMark}}</span>
        </div>
        <div :class="v[3].checkon||v[3].checkon=='true'?'datamarked_blue':'cala_date'">{{v[3].date}}&nbsp;</div>
      </el-col>
      <el-col :span="3" @click="editDate(v[1])">
        <div class="paiban">
          <span v-if="v[4].plan||v[4].plan=='true'">{{myMark}}</span>
        </div>
        <div :class="v[4].checkon||v[4].checkon=='true'?'datamarked_blue':'cala_date'">{{v[4].date}}&nbsp;</div>
      </el-col>
      <el-col :span="3" @click="editDate(v[1])">
        <div class="paiban">
          <span v-if="v[5].plan||v[5].plan=='true'">{{myMark}}</span>
        </div>
        <div :class="v[5].checkon||v[5].checkon=='true'?'datamarked_blue':'cala_date'">{{v[5].date}}&nbsp;</div>
      </el-col>
      <el-col :span="3" class="text_yellow" @click="editDate(v[1])">
        <div class="paiban">
          <span v-if="v[6].plan||v[6].plan=='true'">{{myMark}}</span>
        </div>
        <div :class="v[6].checkon||v[6].checkon=='true'?'datamarked_yellow':'cala_date'">{{v[6].date}}&nbsp;</div>
      </el-col>
      <el-col :span="1">&nbsp;</el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myTitle: "",
      myData: [],
      myMark: ""
    };
  },
  props: {
    title: {
      type: String,
      require: true
    },
    calenderData: {
      type: Array,
      require: true
    },
    mark: {
      type: String,
      require: true
    }
  },
  // 进入页面加载数据
  mounted() {
    setTimeout(() => {
      this.initData();
    }, 1000);
  },
  methods: {
    /**
     * 初始化数据
     */
    initData() {
      if (!this.title) {
        this.myTitle = "calendar";
      } else {
        this.myTitle = this.title;
      }
      if (!this.calenderData) {
        this.myData = [];
      } else {
        this.myData = this.calenderData;
      }
      if (!this.mark) {
        this.myMark = "";
      } else {
        this.myMark = this.mark;
      }
    },
    /**编辑日历信息
     */
    editCanlender(data) {}
    /**
     * 编辑待办事项
     */
  }
};
</script>
